<template>
  <section>
    <el-button size="mini" type="primary" @click="addAdBtn">添加</el-button>
    <el-table :data="adList">
      <el-table-column type="index" label="序号"/>
      <el-table-column label="标题" prop="title"/>
      <el-table-column label="详情">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="setAdBtn(scope.row)">设置</el-button>
        </template>
      </el-table-column>
      <el-table-column label="开始" :formatter="formatDate" prop="start">
      </el-table-column>
      <el-table-column label="结束" :formatter="formatDate" prop="end">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editBtn(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="delBtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" style="margin-top:20px;" small
                   layout="prev, pager, next"
                   :page-count="totalPage"
                   @current-change="goPage">
    </el-pagination>
    <el-dialog :visible.sync="editDialog" v-if="editDialog" :title="currAd.id?'编辑':'新建'">
      <new-ad :ad="currAd" v-on:confirm="confirmDialogBtn"></new-ad>
    </el-dialog>
  </section>
</template>

<script>
  import pageKeys from './pageKeys'
  import setAd from '../setAd'
  import newAd from './newAd'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  import dateFormater from '@/common/date-formater'
  export default {
    name: "index",
    props:['adPosition'],
    components:{newAd,setAd,pageKeys},
    data(){
      return {
        adList:null,
        totalPage:0,
        adTypeList:null,
        editDialog:false,
        currAd:null,
        showSetDialog:false
      }
    },
    created(){
      console.log('查看当前广告位————————————————',this.adPosition)
      this.getAdList()
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      formatDate(row, column, cellValue, index){
        return dateFormater.formatDatetime(cellValue)
      },
      backBtn(){
        this.currAd=null
        this.showSetDialog=false
      },
      addAdBtn(){
        // this.currAd={data:{}}
        this.currAd={adPositionId:this.adPosition.id,
          img:'',url:'',data:{type:''},departmentId:''
        }
        console.log('不能空？？？',this.currAd)
        this.editDialog=true
      },
      goPage(val){
        this.getAdList(val-1)
      },
      getAdList(pageNo){//通过广告位获取广告列表
        this.fetch({name:"getAdList",data:{page:pageNo?pageNo:0,lightBoxId:this.adPosition.id}})
          .then(res=>{
            console.log('广告位下的广告列表————————',res)
            // this.adList=res.content
            // this.totalPage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      confirmDialogBtn(data){
        if(data.id){
          //保存
          this.updateAd(data)
        }else {
          //新建
          this.createAd(data)
        }
      },
      createAd(param){
        this.fetch({name:"createAd",data:{...param,adPositionId:this.adPosition.id}})
          .then(res=>{
            console.log(res)
            this.$message({type:'success',message:'创建成功！'})
            this.getAdList()
            this.editDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      updateAd(data){
        this.fetch({name:"updateAd",data})
          .then(res=>{
            console.log(res)
            this.$message({type:'success',message:'保存成功！'})
            this.getAdList()
            this.showSetDialog=false
            this.editDialog=false
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      editBtn(row){
        this.currAd=row
        this.editDialog=true
      },
      delBtn(row){
        this.$confirm('确认删除？')
          .then(()=> {
            this.fetch({name:"deleteAd",data:{id:row.id}})
              .then(res=>{
                console.log(res)
                this.getAdList()
              })
              .catch(err=>{
                console.log(err)
                errHandler.handle(this,err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      setAdBtn(row){
        console.log(row)
        this.currAd={title:row.title,id:row.id,config:row.config,adType:row.adType}
        // this.currAd=row
        this.showSetDialog=true
      },
    }
  }
</script>

<style scoped>

</style>
